<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人主页</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>

<body>
  <div>
    <header id="header" class="row">
      <div class="col"></div>
      <div class="col col-3 user offset-1">
        <img src="images/avator.jpg" alt="">
        <span>傅艺伟</span>
      </div>
      <div class="nav col col-5 offset-1">
        <ul>
          <li><a href="#header">Home</a></li>
          <li><a href="#about">About Me</a></li>
          <li><a href="#studyDirection">Study Direction</a></li>
          <li><a href="#">Studied</a></li>
        </ul>
      </div>
    </header>
    <div id="about">
      <div class="aboutWarp">
        <img src="images/S1.png" class="img0">
        <span class="line"><span class="circle"></span></span>
        <div class="aboutTitle">
          <p>where i am from?</p>
          <p>我来自舟山一个美丽的群岛</p>
          <div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal1">
              舟山
            </button>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel"
              aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">我的家乡</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                      <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
                          class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                          aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                          aria-label="Slide 3"></button>
                      </div>
                      <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img src="images/花鸟岛.jpg" class="d-block w-100" alt="...">
                          <div class="carousel-caption d-none d-md-block">
                            <h5>花鸟岛</h5>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="images/衢山岛.jpg" class="d-block w-100 img1" alt="...">
                          <div class="carousel-caption d-none d-md-block">
                            <h5>衢山岛</h5>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="images/临城.jpg" class="d-block w-100 img1" alt="...">
                          <div class="carousel-caption d-none d-md-block">
                            <h5>临城</h5>
                          </div>
                        </div>
                      </div>
                      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                      </button>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="aboutWarp">
        <img src="images/S2.png" class="img0">
        <span class="line"><span class="circle"></span></span>
        <div class="aboutTitle">
          <p>What i can do?</p>
          <p>我可以吃饭、睡觉、打代码</p>
        </div>
      </div>
      <div class="aboutWarp">
        <img src="images/S3.png" class="img0">
        <div>
          <div class="aboutTitle">
            <p>My Hobbies</p>
            <p>打代码、听歌、吃各种好吃的、和朋友到处走走、风景</p>
            <div>
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                爱好
              </button>

              <!-- Modal -->
              <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
                aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLabel2">爱好</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                            class="active" aria-current="true" aria-label="Slide 1"></button>
                          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <img src="images/jjLin.jpg" class="d-block w-100" alt="...">
                          </div>
                          <div class="carousel-item">
                            <img src="images/coding.gif" class="d-block w-100" alt="...">
                          </div>
                          <div class="carousel-item">
                            <img src="images/Scenery.jpg" class="d-block w-100" alt="...">
                          </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                          data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                          data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="studyDirection">
      <h1>学习方向</h1>
      <div class="directionWarp">
        <img src="images/coding2.jpg" alt="" class="studyImg">
        <div class="contentWarp">
          <div>
            <p>
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseWidthExample1" aria-expanded="false" aria-controls="collapseWidthExample">
                学习方向
              </button>
            </p>
            <div style="min-height: 120px;">
              <div class="collapse collapse-horizontal" id="collapseWidthExample1">
                <div class="card card-body" style="width: 300px;">
                  前端web
                </div>
              </div>
            </div>
          </div>

          <div>
            <p>
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseWidthExample2" aria-expanded="false" aria-controls="collapseWidthExample">
                目前已学（略懂）
              </button>
            </p>
            <div style="min-height: 120px;">
              <div class="collapse collapse-horizontal" id="collapseWidthExample2">
                <div class="card card-body" style="width: 300px;">
                  （HTML5、CSS3、JavaScript、BootStrap、ES6、Vue.js、LESS、React（基础））(略知一二)
                </div>
              </div>
            </div>
          </div>

          <div>
            <p>
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseWidthExample3" aria-expanded="false" aria-controls="collapseWidthExample">
                学习冲冲冲
              </button>
            </p>
            <div style="min-height: 120px;">
              <div class="collapse collapse-horizontal" id="collapseWidthExample3">
                <div class="card card-body" style="width: 300px;">
                  昨天在哔哩哔哩看了个<a href="https://www.bilibili.com/video/BV18P4y137UB" target='blank'>视频</a>叫前端为什么学这么多
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      CopyRight@个人所有
    </footer>
  </div>
  <script src="js/index.js"></script>
</body>

</html>